import { Button } from 'antd'
import { UploadVideo } from '@/desktop/components/upload'
import type { VideoWord } from '@/services/common/definition'

export default function EditVideo(props: {
  word: VideoWord
  onSave: (word: VideoWord) => void
  onCancel: () => void
}) {
  const { word: initialWord, onSave, onCancel } = props
  const [word, setWord] = useState(initialWord)

  return <>
    <main>
      <UploadVideo value={word.url} onChange={url => setWord({ ...word, url: url ?? '' })} />
    </main>
    <footer>
      <Button onClick={onCancel}>取消</Button>
      <Button type="primary" disabled={!word.url} onClick={() => onSave(word)}>
        保存
      </Button>
    </footer>
  </>
}
